<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let data = {
            name: 'zhangmeili',
            age: 18,
            hobby: [1, 2],
            school: {
                sname: '好谷'
            }
        };

        function defineReactive(obj) {
            Object.keys(obj).forEach((key) => {
                if (typeof obj[key] === 'object') {
                    obj[key] = defineReactive(obj[key]);
                }
            });

            return new Proxy(obj, {
                get(target, key) {
                    console.log('get')
                    return target[key]
                },
                set(target, key, val) {
                    console.log('set')
                    return target[key] = val
                }
            })
        }

        data = defineReactive(data);
        // data.school.sname = '2323';
        data.hobby.push(89);
    </script>
</body>

</html>